<template>
    <div class="contioner">
        <div class="search-form divClass" v-show="headerShow" style="padding-top: 15px">
            <a-form size="small" :model="query" layout="inline">
                <a-form-item label="日期" prop="beginDate">
                    <a-year-picker v-model="query.beginDate" :style="{ width: '180px' }" placeholder="选择开始日期"
                        class="bacClass" />
                </a-form-item>
                <CorporateSectorCascader :configCascader="configCascader" @changeCascader="changeCascader" />
                <a-form-item label="班组" prop="departmentIds">
                    <a-cascader :options="options" :style="{ width: '360px' }" v-model="query.departmentIds"
                        class="bacClass" multiple popup-container="html"/>
                </a-form-item>
            </a-form>
            <div class="my-tool-bar" style="margin-bottom: 5px">
                <a-space>
                    <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
                    <el-button pain @click="emit('takebiaoji', 0)" plain>返回主页</el-button>
                </a-space>
            </div>
        </div>
        <div class="my-divisders">
            <a-divider orientation="center">
                <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
            </a-divider>
        </div>

        <div style="background-color: #f0f2f5; height: 10px"></div>
        <div v-loading="loadings" :style="{ height: '89%', width: '100%', padding: '10px', display: 'flex', justifyContent: 'space-between', }">
            <div :style="{ height: '100%', width: '49%' }">
                <div :style="{ height: '35%', width: '100%' }">
                    <AgGridVuesCopys :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady"
                        :rowHeight="30" :headerHeight="30" @click="gridClicks" style="height:100%"
                        :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList" :columnDefs="tc">
                    </AgGridVuesCopys>
                </div>
                <div style="width: 100%; height: 65%">
                    <div ref="myChart" :style="{ width: '100%', height: '100%' }"></div>
                </div>
            </div>
            <div :style="{ height: '100%', width: '49%' }">
                <div :style="{ height: '35%', width: '100%' }">
                    <AgGridVuesCopys :suppressCopyRowsToClipboard="true" rowSelection="multiple" style="height:100%"
                        :rowHeight="30" :headerHeight="30" :defaultColDef="defaultColDef" class='ag-theme-alpine'
                        :rowData="tableDataList2" :columnDefs="tc2">
                    </AgGridVuesCopys>
                </div>
                <div style="width: 100%; height: 65%">
                    <div ref="myChart2" :style="{ width: '100%', height: '100%' }"></div>
                </div>
            </div>
        </div>
    </div>
</template>
    
<script lang="ts" setup>


import { Message } from '@arco-design/web-vue'
import { ref, reactive, onMounted, watch } from 'vue'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
// 引入element提示
//引入封装post
import { post } from '@/api/http'
import { Search, EditPen } from '@element-plus/icons-vue'
import { slicing } from '@/utils/caseFrimAndSecRig'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
const emit = defineEmits(['takebiaoji'])
const headerShow = ref<boolean>(true)
const loadings = ref(false)
const myChart: any = ref()
const myChart2: any = ref()
const states = () => {
    return echarts.init(myChart.value!)
}
const states2 = () => {
    return echarts.init(myChart2.value!)
}

const option: any = ref(
    {
        title: {
            text: '班组产量'
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: []
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                name: '当日',
                type: 'line',
                stack: 'Total',
                data: []
            },
        ]
    }
)
const option2: any = ref(
    {
        title: {
            text: '班组日产量'
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: []
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                name: '当日',
                type: 'line',
                stack: 'Total',
                data: []
            },
        ]
    }
)


const configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '厂区', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
})

const options = ref([])

const changeCascader = (data: any) => {
    const { corporateId, sectorId, sectorLabel, corporateLabel } = data
    query.planOrderCode = corporateId
    post({ url: `org/baCompany/getDepartmentTree?companyId=${corporateId} ` }).then((res: any) => {
        if (res.code == 200) {
            options.value = res.data
        }
    })
}


//getlist初始化接口参数
let query: any = reactive({
    beginDate: dayjs().format('YYYY'), //当天日期
    planOrderCode: '',
    departmentIds: []
})

const tableDataList: any = ref([])
const tableDataList2: any = ref([])
const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    flex: 1
}

const tc = [
    {
        headerName: '部门',
        field: 'department',
        width: 120
    },
    {
        headerName: '日期',
        field: 'dateByMonth',
        width: 150
    },
    {
        headerName: '月目标',
        field: 'goalByMonth',
        width: 150
    },
    {
        headerName: '月产量',
        field: 'outputByMonth',
        width: 150
    }
]

const tc2 = [
    {
        headerName: '部门',
        field: 'department',
        width: 120
    },
    {
        headerName: '日期',
        field: 'dateByDay',
        width: 110
    },
    {
        headerName: '日目标',
        field: 'goalByDay',
        width: 160
    },
    {
        headerName: '日产量',
        field: 'outputByDay',
        width: 160
    }
]


function selectJt() {
    loadings.value = true
    if (!query.planOrderCode) { Message.warning('公司必填');loadings.value = false; return false; }
    post({
        url: 'qms/report/departmentOutputReport',
        data: {
            "firmId": query.planOrderCode,
            "year": Number(query.beginDate),
            departmentIds: query.departmentIds
        }
    }).then((res: any) => {
        if (res.code == 200) {
            tableDataList.value = res.data.tableList
            const state = states()
            option.value.xAxis.data = res.data.mouthList
            option.value.legend.data = Object.keys(res.data.lineData)
            Object.keys(res.data.lineData).forEach((o: any, i: any) => {
                option.value.series[i] = {
                    name: o,
                    type: 'line',
                    stack: 'Total',
                    data: res.data.lineData[o].map((res: any) => {
                        return res.outputByMonth
                    })
                }
            })
            state.setOption(option.value)
            loadings.value = false
        } else {
            Message.error(res.message)
            loadings.value = false
        }
    }).finally(()=>{
        loadings.value = false
    })
}


const getList = () => {
    selectJt()
}

const gridClicks = () => {
    loadings.value = true
    post({
        url: 'qms/report/departmentOutputReportByDay',
        data: {
            firmId: query.planOrderCode,
            date: gridOption.value.getSelectedRows()[0].dateByMonthPattern,
            departmentId: gridOption.value.getSelectedRows()[0].departmentId
        }
    }).then((res: any) => {
        if (res.code == 200) {
            tableDataList2.value = res.data
            const state = states2()
            nextTick(() => {
                option2.value.legend.data = [res.data[0].department]
                option2.value.xAxis.data = res.data.map((z: any) => {
                    return z.dateByDay
                })
                option2.value.series[0].name = res.data[0].department
                option2.value.series[0].data = res.data.map((b: any) => {
                    return b.outputByDay
                })
                state.setOption(option2.value)
            })
            loadings.value = false
        } else {
            Message.warning(res.message)
            loadings.value = false
        }
    }).finally(()=>{
        loadings.value = false
    })
}
</script>
<style scoped lang="less">
.contioner {
    height: 100%;
    background: #fff;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>
      